<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>旋转的基因链</title>
	<style>
		*{ margin: 0; padding: 0; box-sizing: border-box; }
		ul, ol{ list-style: none; }
		#root{
			display: flex; align-items: center; justify-content: center;
			width: 100vw; height: 100vh;
			overflow: hidden;
		}
		.center{
			transform-style: preserve-3d;
			transform-origin: center;
			perspective: 600px;
			/*border: 1px solid red;*/
		}
		.center ul{

			transform-style: preserve-3d;
			position: relative;
			display: flex; justify-content: space-between;
			width: 300px;
			animation: rotateY 5s infinite linear;
			/*transform: rotateY(60deg);*/
			/*outline: 1px dashed red;*/
		}
		.center ul li{
			width: 50px; height: 50px; border-radius: 40px; background: red;
			animation: rotateY-r 5s infinite linear;
			box-shadow: 0 0 10px #fff inset;
		}
		
		.center ul li:nth-child(2){ background: blue; }
		.center ul:after{ content: '';
			position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;
			width: 200px; height: 5px;
			background: #0B2E13;
			box-shadow: 0 0 5px #fff inset;
		}

		.center ul:nth-child(2),
		.center ul:nth-child(2) li{ animation-delay: 300ms;}
		.center ul:nth-child(3),
		.center ul:nth-child(3) li{ animation-delay: 600ms;}
		.center ul:nth-child(4),
		.center ul:nth-child(4) li{ animation-delay: 900ms;}
		.center ul:nth-child(5),
		.center ul:nth-child(5) li{ animation-delay: 1200ms;}
		.center ul:nth-child(6),
		.center ul:nth-child(6) li{ animation-delay: 1500ms;}
		.center ul:nth-child(7),
		.center ul:nth-child(7) li{ animation-delay: 1800ms;}
		.center ul:nth-child(8),
		.center ul:nth-child(8) li{ animation-delay: 2100ms;}
		.center ul:nth-child(9),
		.center ul:nth-child(9) li{ animation-delay: 2400ms;}
		.center ul:nth-child(10),
		.center ul:nth-child(10) li{ animation-delay: 2700ms;}

		@keyframes rotateY{
			0%{ transform: rotateY(0); }
			100%{ transform: rotateY(360deg); }
		}
		@keyframes rotateY-r{
			0%{ transform: rotateY(0); }
			100%{ transform: rotateY(-360deg); }
		}
	</style>
</head>
<body>
<div id="root">
	<div class="center">
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>
</body>
</html>
